<template>
    <!-- 
        点击用户头像 => 点击“账号设置” => 点击“修改手机”，执行如上操作后显示的界面
     -->
    <div id="user-center-accountSettings-updatePhone-contrainer">
        <el-row id="user-center-accountSettings-updatePhone-contrainer-header">
            <span>
                修改手机
            </span>
        </el-row>
        <el-divider/>
        <el-row id="user-center-accountSettings-updatePhone-contrainer-main">
            <el-container>
                <el-header>
                    <el-steps :active="stepActive" finish-status="success">
                        <el-step title="输入手机号"></el-step>
                        <el-step title="填写验证码"></el-step>
                        <!-- <el-step title="完成"></el-step> -->
                    </el-steps>
                </el-header>
                <el-main>
                    <!-- <router-view/> -->
                    <!-- 修改手机之第一步操作视图 -->
                    <div id="user-center-accountSettings-updatePhoneStep2-contrainer" v-if="phoneVive0">
                        <el-input placeholder="请输入手机号" v-model="phone"></el-input>
                        <div v-if="phonewarn" class="warn">请输入手机号码</div>
                        <div v-if="phonewarn2" class="warn">请输入正确的手机号码</div>
                    </div>
                    <!-- 修改手机之第二步操作视图 -->
                    <div id="user-center-accountSettings-updatePhoneStep1-contrainer" v-if="phoneVive1">
                        <div>
                            已将验证码发送到手机{{phone}}
                        </div>
                        <div>
                            <el-input placeholder="请填写验证码" v-model="code"/>
                        </div>
                        <div v-if="codewarn" class="warn">请输入验证码</div>
                        <div v-if="codewarn2" class="warn">验证码错误</div>
                    </div>
                        <!-- 修改手机之第三步操作视图 -->
                    <div id="user-center-accountSettings-updatePhoneStep3-contrainer" v-if="phoneVive2">
                        绑定新手机号成功
                    </div>
                </el-main>
                <el-footer>
                    <el-button @click="next">{{buttonFont}}</el-button>
                </el-footer>
            </el-container>
        </el-row>
    </div>
</template>
<script>
import cookie from 'js-cookie'
export default {
    name: 'UpdatePhone',
    data() {
        return {
            //当前第几步
            stepActive: 0,
            //------------------第一步-------------
            //手机号
            phone:'',
            //视图显示
            phoneVive0:true,
            phoneVive1:false,
            phoneVive2:false,
            //按钮字
            buttonFont:'下一步',
            //提示输入手机号码
            phonewarn:false,
            phonewarn2:false,
            //---------------------第二步---------------
            //用户输入的验证码
            code:'',
            //验证码提示信息
            codewarn:false,
            codewarn2:false,
             //用户信息
            user:{
                name:'',
                phone:'',
                email:'',
                updateTime:'1970/1/1'
            },
        }
    },
    created(){
        this.getUser()
    },
    methods: {
        // 点击“下一步”按钮时触发事件
        next() {
            if(this.stepActive==0){
                var regex = /^1(3[0-9]|bai5[189]|8[6789])[0-9]{8}$/ ;
                //判断手机号码是否为空
                if(this.phone==''){
                    this.phonewarn=true
                    this.phonewarn2=false
                    return 
                }
                //判断手机号码是否符合格式
                if(regex.test(this.phone)){
                    console.log("符合")
                    this.phoneVive0=false,
                    this.phoneVive1=true,
                    this.phoneVive2=false,
                    this.stepActive++
                    //如果符合格式就发送验证码
                    this.$http.get("http://localhost:7001/demo5/phoneCode/"+this.phone).then(res=>{
                        
                    })

                }else{
                    console.log("不符合")
                    this.phonewarn2=true,
                    this.phonewarn=false
                }
                
            }else if(this.stepActive==1){
                //判断用户输入的验证码和后台传来的是否一致
                if(this.code!=""){
                    //验证码不为空
                    //发送请求检查验证码是否正确
                    this.$http.get("http://localhost:7001/demo5/checkPhoneCode/"+this.phone+"/"+this.code+"/"+this.user.id).then(res=>{
                        console.log("执行了code")
                        //如果验证码正确
                        if(res.data.code==0){
                            console.log("验证码正确")
                            this.codewarn=false
                            this.phoneVive0=false,
                            this.phoneVive1=false,
                            this.phoneVive2=true,
                            this.stepActive++
                            this.buttonFont="完成"
                            this.user.phone=this.phone
                            cookie.set("userInfo",this.user,{expires: 7,domain: "localhost"})
                        }else{
                            console.log("验证码错误")
                            this.codewarn2=true
                            this.codewarn=false
                        }
                    })
                    
                }else{
                    //不一致则显示验证码错误
                    this.codewarn=true
                    this.codewarn2=false
                }

            }else if(this.stepActive==2){
                this.phoneVive0=false,
                this.phoneVive1=false,
                this.phoneVive2=true
                // this.stepActive==0
                this.$router.push({
                    path: `accountSettingsIndex`
                })
            }
        },
        //从cookie中获取用户信息
        getUser(){
            this.user=JSON.parse(cookie.get("userInfo"))
            console.log(this.user.phone)
            console.log(this.user)
        },
    }
}
</script>
<style>
    #user-center-accountSettings-updatePhone-contrainer-header {
        font-size: 20px;
    }
    #user-center-accountSettings-updatePhoneStep2-contrainer {
        width: 50%;
        margin: auto;
    }
    #user-center-accountSettings-updatePhoneStep2-contrainer > .el-input:first-child {
        margin-bottom: 2%;
    }
    #user-center-accountSettings-updatePhoneStep1-contrainer > div {
        margin: auto;
        width: 50%;
    }
    #user-center-accountSettings-updatePhoneStep1-contrainer > div:first-child {
        margin-bottom: 3%;
        color: #909399;
    }
     #user-center-accountSettings-updatePhoneStep3-contrainer {
        text-align: center;
        font-size: 48px;
        color: #909399;
    }
    .warn{
        color: red;

    }
</style>